@import '@/styles/color.less';
@import '@/styles/token.less';

// 右键菜单样式
.contextMenu {
  background: @colorBgElevated;
  border: @lineWidth solid @colorBorder;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 15%);
  padding: 4px 0;
  min-width: 120px;
  z-index: 1000;
}

.contextMenuItem {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
  color: @colorTextBase;
  font-size: @fontSizeSm;
  transition: all 0.2s ease;

  &:hover {
    background: @colorPrimaryBg;
    color: @colorPrimary;
  }

  &.dangerMenuItem {
    color: @colorError;

    &:hover {
      background: @colorErrorBg;
      color: @colorError;
    }
  }

  &.disabledMenuItem {
    color: @colorTextQuaternary;
    cursor: not-allowed;

    &:hover {
      background: transparent;
      color: @colorTextQuaternary;
    }
  }
}

.contextMenuIcon {
  margin-right: 8px;
  font-size: @fontSizeSm;
  display: flex;
  align-items: center;
}

.contextMenuDivider {
  height: 1px;
  background: @colorBorder;
  margin: 4px 0;
}

// 右键菜单暗色主题支持
[data-theme='dark'] {
  .contextMenu {
    background: @colorBgElevated;
    border-color: @colorBorder;
  }

  .contextMenuItem {
    color: @colorTextBase;

    &:hover {
      background: @colorPrimaryBg;
      color: @colorPrimary;
    }

    &.dangerMenuItem {
      color: @colorError;

      &:hover {
        background: @colorErrorBg;
        color: @colorError;
      }
    }
  }

  .contextMenuDivider {
    background: @colorBorder;
  }
}
